<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投递详情 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f5f7fa;
            color: #333;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        .app-container {
            max-width: 375px; /* 标准小程序尺寸 */
            margin: 0 auto;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        
        /* 头部导航 */
        .page-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
        }
        
        .page-header .actions {
            display: flex;
            align-items: center;
        }
        
        .page-header .action-icon {
            font-size: 20px;
            color: #333;
            margin-left: 16px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .back-button {
            border: none;
            background: none;
            font-size: 18px;
            color: #333;
            padding: 0;
            margin-right: 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            text-align: center;
            margin: 0;
        }
        
        /* 内容区域 */
        .content-section {
            background-color: #fff;
            border-radius: 0;
            margin-bottom: 8px;
            padding: 14px 16px;
        }
        
        /* 职位信息 */
        .job-info {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0;
        }
        
        .company-logo {
            width: 52px;
            height: 52px;
            border-radius: 6px;
            border: 1px solid #eee;
            margin-right: 12px;
            background-color: #fff;
            object-fit: cover;
        }
        
        .job-details {
            flex: 1;
        }
        
        .job-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 6px 0;
        }
        
        .company-name {
            font-size: 14px;
            color: #666;
            margin: 0 0 6px 0;
        }
        
        .job-salary {
            font-size: 14px;
            color: #ff6b6b;
            margin: 0 0 6px 0;
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 100px;
            background-color: #fff3e0;
            color: #ffa726;
        }
        
        /* 状态区域 */
        .status-section {
            background-color: #fff;
            padding: 14px 16px;
        }
        
        .section-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin: 0 0 14px 0;
            padding-bottom: 0;
        }
        
        .status-card {
            display: flex;
            align-items: center;
            padding: 0;
            margin-bottom: 0;
            background-color: transparent;
        }
        
        .status-icon {
            color: #4a6fee;
            font-size: 18px;
            margin-right: 12px;
            width: 36px;
            height: 36px;
            background-color: #f0f4ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .status-content {
            flex: 1;
        }
        
        .status-title {
            font-size: 15px;
            font-weight: 500;
            color: #333;
            margin: 0 0 4px 0;
        }
        
        .status-desc {
            font-size: 13px;
            color: #666;
            margin: 0 0 4px 0;
        }
        
        .status-time {
            font-size: 12px;
            color: #999;
            margin: 0;
        }
        
        /* 申请详情 */
        .application-info {
            background-color: #fff;
            padding: 14px 16px;
            margin-bottom: 8px;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 10px;
        }
        
        .info-item:last-child {
            margin-bottom: 0;
        }
        
        .info-label {
            width: 70px;
            font-size: 13px;
            color: #999;
        }
        
        .info-value {
            flex: 1;
            font-size: 13px;
            color: #333;
        }
        
        /* 操作按钮 */
        .button-row {
            display: flex;
            gap: 10px;
            padding: 0 16px;
            margin-bottom: 16px;
        }
        
        .button-row .btn {
            flex: 1;
            height: 38px;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .btn-outline {
            border: 1px solid #ddd;
            background-color: #fff;
            color: #666;
        }
        
        .btn-outline:active {
            background-color: #f5f5f5;
        }
        
        /* 底部操作按钮 */
        .bottom-action {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            padding: 12px 16px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
            box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
            z-index: 100;
            max-width: 375px;
            margin: 0 auto;
        }
        
        /* 加载动画 */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(72, 99, 220, 0.2);
            border-radius: 50%;
            border-top-color: #4863dc;
            animation: spin 0.8s linear infinite;
            margin-bottom: 10px;
        }
        
        .loading-text {
            font-size: 14px;
            color: #666;
        }
        
        /* 提示消息 */
        .toast-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 16px;
            border-radius: 4px;
            font-size: 14px;
            z-index: 1001;
            animation: fadeInOut 2.5s ease forwards;
        }
        
        @keyframes fadeInOut {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
        }
        
        .toast-message.success {
            background-color: #4CAF50;
        }
        
        .toast-message.info {
            background-color: #2196F3;
        }
        
        .apply-btn {
            display: block;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background-color: #4863dc;
            color: white;
            font-size: 16px;
            font-weight: 500;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .apply-btn:active {
            opacity: 0.85;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="page-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">投递详情</h1>
        </header>

        <!-- 职位信息 -->
        <section class="content-section">
            <div class="job-info">
                <img src="../img/company1.jpg" alt="公司Logo" class="company-logo" id="company-logo">
                <div class="job-details">
                    <h2 class="job-title" id="job-title">前端开发工程师</h2>
                    <p class="company-name" id="company-name">字节跳动</p>
                    <p class="job-salary" id="salary">20k-30k · 14薪</p>
                    <div class="status-badge" id="status-badge">待处理</div>
                </div>
            </div>
        </section>
        
        <!-- 申请状态 -->
        <section class="status-section">
            <h3 class="section-title">申请状态</h3>
            <div class="status-card" id="status-card">
                <div class="status-icon">
                    <i class="bi bi-hourglass-split"></i>
                </div>
                <div class="status-content">
                    <h4 class="status-title">简历审核中</h4>
                    <p class="status-desc">您的简历正在被企业审核中，请耐心等待</p>
                    <p class="status-time">投递时间：2023-05-15 14:30</p>
                </div>
            </div>
        </section>
        
        <!-- 申请信息 -->
        <section class="application-info">
            <h3 class="section-title">申请信息</h3>
            <div class="info-item">
                <div class="info-label">申请编号</div>
                <div class="info-value" id="application-id">AP202305150001</div>
            </div>
            <div class="info-item">
                <div class="info-label">投递时间</div>
                <div class="info-value" id="apply-time">2023-05-15 14:30</div>
            </div>
            <div class="info-item">
                <div class="info-label">使用简历</div>
                <div class="info-value" id="resume-name">校招简历.pdf</div>
            </div>
            <div class="info-item">
                <div class="info-label">岗位类型</div>
                <div class="info-value" id="job-type">全职</div>
            </div>
            <div class="info-item">
                <div class="info-label">工作地点</div>
                <div class="info-value" id="job-location">北京</div>
            </div>
        </section>
        
        <!-- 操作按钮 -->
        <section class="button-row">
            <button class="btn btn-outline" id="refresh-action">刷新状态</button>
            <button class="btn btn-outline" id="delete-action">撤回申请</button>
        </section>

        <!-- 底部操作按钮 -->
        <section class="bottom-action">
            <button class="apply-btn" id="secondary-action">查看职位详情</button>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const applicationId = urlParams.get('id') || '1001';
            const status = urlParams.get('status') || 'pending';
            
            // 根据状态更新UI
            updateUI(status);
            
            // 添加触摸反馈效果
            addTouchFeedback();
            
            // 绑定按钮事件
            document.getElementById('delete-action').addEventListener('click', function() {
                const currentStatus = document.getElementById('status-badge').getAttribute('data-status');
                
                if (currentStatus === 'pending') {
                    // 撤回申请逻辑
                    if (confirm('确定要撤回此申请吗？此操作将立即取消您的申请，且不可恢复。')) {
                        showToast('正在处理您的请求...');
                        showLoading();
                        
                        // 模拟网络请求
                        setTimeout(() => {
                            hideLoading();
                            showToast('已成功撤回申请', 'success');
                            
                            // 2秒后跳转
                            setTimeout(() => {
                                window.location.href = 'resume-applications.html';
                            }, 2000);
                        }, 1500);
                    }
                } else if (currentStatus === 'rejected') {
                    // 删除记录逻辑
                    if (confirm('确定要删除此申请记录吗？')) {
                        showToast('正在删除记录...');
                        showLoading();
                        
                        // 模拟网络请求
                        setTimeout(() => {
                            hideLoading();
                            showToast('记录已删除');
                            
                            // 1秒后跳转
                            setTimeout(() => {
                                window.location.href = 'resume-applications.html';
                            }, 1000);
                        }, 1000);
                    }
                }
            });
            
            // 刷新状态按钮
            document.getElementById('refresh-action').addEventListener('click', function() {
                showToast('正在刷新状态...');
                showLoading();
                
                // 模拟刷新延迟
                setTimeout(function() {
                    hideLoading();
                    
                    // 随机结果示例
                    const results = ['pending', 'offer', 'rejected'];
                    const result = results[Math.floor(Math.random() * results.length)];
                    
                    if (result === 'pending') {
                        showToast('状态未变化');
                    } else if (result === 'offer') {
                        showToast('好消息！您已被录用');
                        updateUI('offer');
                    } else {
                        showToast('很遗憾，您未被录用');
                        updateUI('rejected');
                    }
                }, 1500);
            });

            // 底部按钮事件
            document.getElementById('secondary-action').addEventListener('click', function() {
                const currentStatus = document.getElementById('status-badge').getAttribute('data-status');
                
                if (currentStatus === 'pending') {
                    // 查看职位详情
                    window.location.href = 'internship-detail.html?id=' + applicationId + '&from=application';
                } else if (currentStatus === 'offer') {
                    // 联系HR
                    showToast('正在为您连接HR，请稍候...');
                    
                    // 模拟打开聊天窗口
                    setTimeout(() => {
                        window.location.href = 'chat.html?contact=hr&company=bytedance';
                    }, 800);
                } else if (currentStatus === 'rejected') {
                    // 查看相似职位
                    window.location.href = 'internships.html?similar=true&source=' + applicationId;
                }
            });

            // 允许通过点击更改状态（仅用于演示）
            document.getElementById('status-badge').addEventListener('click', function() {
                const currentStatus = this.getAttribute('data-status');
                
                // 切换状态顺序：pending -> offer -> rejected -> pending
                if (currentStatus === 'pending') {
                    updateUI('offer');
                } else if (currentStatus === 'offer') {
                    updateUI('rejected');
                } else {
                    updateUI('pending');
                }
                
                // 显示提示
                showToast('状态已更改为：' + this.textContent, 'info');
            });
            
            // 点击公司Logo或职位名称
            document.getElementById('company-logo').addEventListener('click', function() {
                addClickEffect(this);
                setTimeout(() => {
                    window.location.href = 'company-detail.html?id=bytedance';
                }, 150);
            });
            
            document.getElementById('company-name').addEventListener('click', function() {
                this.style.opacity = '0.7';
                setTimeout(() => {
                    this.style.opacity = '1';
                    window.location.href = 'company-detail.html?id=bytedance';
                }, 150);
            });
        });
        
        // 为按钮添加触摸反馈
        function addTouchFeedback() {
            const buttons = document.querySelectorAll('button, .company-logo, .company-name');
            
            buttons.forEach(button => {
                // 触摸开始
                button.addEventListener('touchstart', function() {
                    this.style.transition = 'transform 0.1s, opacity 0.1s';
                    if (this.classList.contains('company-logo')) {
                        this.style.transform = 'scale(0.97)';
                        this.style.opacity = '0.9';
                    } else if (this.classList.contains('apply-btn')) {
                        this.style.transform = 'scale(0.98)';
                        this.style.opacity = '0.9';
                    } else {
                        this.style.opacity = '0.7';
                    }
                });
                
                // 触摸结束
                button.addEventListener('touchend', function() {
                    this.style.transition = 'transform 0.2s, opacity 0.2s';
                    this.style.transform = 'scale(1)';
                    this.style.opacity = '1';
                });
                
                // 触摸取消
                button.addEventListener('touchcancel', function() {
                    this.style.transition = 'transform 0.2s, opacity 0.2s';
                    this.style.transform = 'scale(1)';
                    this.style.opacity = '1';
                });
            });
        }

        // 给元素添加点击效果
        function addClickEffect(element) {
            element.style.transition = 'transform 0.1s, opacity 0.1s';
            element.style.transform = 'scale(0.97)';
            element.style.opacity = '0.9';
            
            setTimeout(() => {
                element.style.transition = 'transform 0.2s, opacity 0.2s';
                element.style.transform = 'scale(1)';
                element.style.opacity = '1';
            }, 200);
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = 'toast-message ' + type;
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 3秒后自动消失
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 3000);
        }

        // 根据状态更新UI
        function updateUI(status) {
            // 获取元素
            const statusBadge = document.getElementById('status-badge');
            const statusCard = document.getElementById('status-card');
            const refreshBtn = document.getElementById('refresh-action');
            const deleteBtn = document.getElementById('delete-action');
            const detailBtn = document.getElementById('secondary-action');
            
            // 重置所有状态类名
            statusBadge.className = 'status-badge';
            
            // 设置当前状态数据属性
            statusBadge.setAttribute('data-status', status);
            
            // 更新UI元素
            switch(status) {
                case 'pending':
                    // 更新状态标签
                    statusBadge.style.backgroundColor = '#1890ff';
                    statusBadge.style.color = '#fff';
                    statusBadge.textContent = '待处理';
                    
                    // 更新状态卡片
                    statusCard.querySelector('.status-icon').innerHTML = '<i class="bi bi-hourglass-split"></i>';
                    statusCard.querySelector('.status-icon').style.backgroundColor = '#f0f4ff';
                    statusCard.querySelector('.status-icon i').style.color = '#4a6fee';
                    statusCard.querySelector('.status-title').textContent = '简历审核中';
                    statusCard.querySelector('.status-desc').textContent = '您的简历正在被企业审核中，请耐心等待';
                    
                    // 显示刷新和撤回按钮
                    refreshBtn.style.display = 'block';
                    deleteBtn.style.display = 'block';
                    deleteBtn.textContent = '撤回申请';
                    detailBtn.textContent = '查看职位详情';
                    break;
                    
                case 'offer':
                    // 更新状态标签
                    statusBadge.style.backgroundColor = '#52c41a';
                    statusBadge.style.color = '#fff';
                    statusBadge.textContent = '录用';
                    
                    // 更新状态卡片
                    statusCard.querySelector('.status-icon').innerHTML = '<i class="bi bi-check-circle"></i>';
                    statusCard.querySelector('.status-icon').style.backgroundColor = '#f6ffed';
                    statusCard.querySelector('.status-icon i').style.color = '#52c41a';
                    statusCard.querySelector('.status-title').textContent = '恭喜！您已通过审核';
                    statusCard.querySelector('.status-desc').textContent = '企业已同意录用您，请及时联系HR确认入职事宜';
                    
                    // 隐藏刷新和撤回按钮，调整底部按钮
                    refreshBtn.style.display = 'none';
                    deleteBtn.style.display = 'none';
                    detailBtn.textContent = '联系HR';
                    break;
                    
                case 'rejected':
                    // 更新状态标签
                    statusBadge.style.backgroundColor = '#f5222d';
                    statusBadge.style.color = '#fff';
                    statusBadge.textContent = '不合适';
                    
                    // 更新状态卡片
                    statusCard.querySelector('.status-icon').innerHTML = '<i class="bi bi-x-circle"></i>';
                    statusCard.querySelector('.status-icon').style.backgroundColor = '#fff1f0';
                    statusCard.querySelector('.status-icon i').style.color = '#f5222d';
                    statusCard.querySelector('.status-title').textContent = '很遗憾，您未被录用';
                    statusCard.querySelector('.status-desc').textContent = '感谢您的关注，建议尝试其他合适的职位';
                    
                    // 调整按钮
                    refreshBtn.style.display = 'none';
                    deleteBtn.textContent = '删除记录';
                    detailBtn.textContent = '查看相似职位';
                    break;
            }
        }

        // 工具函数
        function showLoading() {
            if (!document.querySelector('.loading-overlay')) {
                const loadingEl = document.createElement('div');
                loadingEl.className = 'loading-overlay';
                loadingEl.innerHTML = '<div class="loading-spinner"></div><div class="loading-text">加载中...</div>';
                document.body.appendChild(loadingEl);
            }
        }

        function hideLoading() {
            const loadingEl = document.querySelector('.loading-overlay');
            if (loadingEl) {
                document.body.removeChild(loadingEl);
            }
        }

        function showToast(message, duration = 2000) {
            const toast = document.createElement('div');
            toast.className = 'toast-message';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                document.body.removeChild(toast);
            }, duration);
        }
    </script>
</body>
</html> 